<template>	
	<!--评价-->
	<view>
		<view class="comment" v-for="(item,key) in list">
			<view class="comment_item">
				<view class="comment_title" v-if="item.title">{{ item.title }}</view>
				<view class="comment_icons">
					<template v-if="type=='star'">
						<view v-for="(vv,kk) in textList" :class="'comment_star iconfont ' + (item.star > kk ? ' star_active icon-pingfen1' : ' icon-pingfen0')" @click="clickScore(key,kk)"></view>
					</template>
					<template v-else-if="type=='number'">
						<view v-for="(vv,kk) in numberList" :class="'comment_number' + (item.star > kk ? ' number_active' : '')" @click="clickScore(key,kk)">{{vv}}</view>
					</template>
				</view>
			</view>
			<view class="comment_text" v-if="type=='star'">
				{{ textList[item.star-1] || "" }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'comment',
	props: {
		type: { // 展示类型： star-五星，number-数字【1-10】
			type: String,	
			default: 'star'	
		},
		data: { 	//数据
			type: Array,	
			default: -1
		},
		isclick: { 	//是否编辑
			type: Boolean,	
			default: true
		}
	},
	data(){
		return {
			list: [],
			textList: ['非常差','差','一般','好','非常好'],
			numberList: [1,2,3,4,5,6,7,8,9,10]
		}
	},
	watch:{
		data: function(newval, oldval){
			if(newval != oldval) this.list = newval
		}
	},
	mounted() {
		this.list = this.data
	},
	methods:{
		/**
		 * 打分
		 */
		clickScore(key, kk){
			if(!this.isclick) return
			let list = this.list
			list[key]['star'] = kk + 1
			this.list = list
			this.$emit('result', {type: this.type, data: this.list})
		}
	}
}
</script>

<style lang="scss">
.comment {
	display: flex;
	justify-content: flex-start;
}
.comment_item {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 20rpx;
}
.comment_title {
	width: 150rpx;
	color: #515151;
	font-size: 24rpx;
}
.comment_icons {
	display: flex;
	justify-content: space-around;
}
.comment_star {
	margin-right: 8rpx;	
	font-size: 36rpx;
	color: #515151;
}
.star_active {
	color: #eb351e;	
}
.comment_number {
	margin-right: 8rpx;	
	width: 36rpx;
	height: 36rpx;
	border-radius: 4rpx;
	border: 1px solid #515151;
	background-color: #fff;
	color: #515151;
	font-size: 22rpx;
	line-height: 36rpx;
	text-align: center;
}
.number_active {
	border-color: #eb351e;
	background-color: #eb351e;
	color: #fff;
}
.comment_text {
	font-size: 22rpx;
	line-height: 36rpx;
	margin-left: 10rpx;
	color: #999;
}
</style>